<template>
    <div>
        <a-drawer
                :open="open"
                :closable="false"
                @cancel="onClose"
                width="420"
                body-style="padding:15px 0"
        >
            <div class="header">
                <!--                刷新按钮-->
                <div style="display: flex;justify-content: center;align-items: center">
<!--                    <wifi-outlined :style="{'font-size':'24px'}"/>-->
                    <span style="font-size: 18px;margin-left: 3px;font-weight: 800" @click="loadWifiList">WIFI连接</span>
                </div>
                <img src="../assets/version2.0/rootSettingPage/header.png" style="width: 100%;position: relative;">
            </div>

            <div style="margin: 20px 10px">
                <div class="connectedArea">
                    <span>
                        已连接WIFI
                        <a-button class="reloadBtn" shape="round" type="primary"
                                  @click="loadWifiList">
                            <reload-outlined v-show="!loading"
                                             :style="{fontSize: '16px',position:'absolute'}"/>
                            <loading-outlined v-show="loading"
                                              :style="{fontSize: '16px',position:'absolute'}"></loading-outlined>
                        </a-button>
                        <a-switch class="switch" style="" v-model:checked="checked"
                                  @change="testSwitch"></a-switch>
                    </span>
                    <p></p>

                    <a-button class="settingBtn" style="background-color: deepskyblue;position: relative;top: 7px;" shape="round"
                              v-show="store.state.wifiSignal===0">
                        <img class="wifiImg" src="../assets/image/wifi/hasPass/1-19.png" alt="">{{
                        store.state.wifiName
                        }}
                        <a-button class="stopLoadWifi" @click="disConnectWifi">断开连接</a-button>
                    </a-button>
                    <a-button class="settingBtn" style="background-color: deepskyblue;position: relative;top: 7px;" shape="round"
                              v-show="store.state.wifiSignal>0&&store.state.wifiSignal<=25">
                        <img class="wifiImg" src="../assets/image/wifi/hasPass/20-39.png" alt="">{{
                        store.state.wifiName
                        }}
                        <a-button class="stopLoadWifi" @click="disConnectWifi">断开连接</a-button>
                    </a-button>
                    <a-button class="settingBtn" style="background-color: deepskyblue;position: relative;top: 7px;" shape="round"
                              v-show="store.state.wifiSignal>25&&store.state.wifiSignal<=50">
                        <img class="wifiImg" src="../assets/image/wifi/hasPass/40-69.png" alt="">{{
                        store.state.wifiName
                        }}
                        <a-button class="stopLoadWifi" @click="disConnectWifi">断开连接</a-button>
                    </a-button>
                    <a-button class="settingBtn" style="background-color: deepskyblue;position: relative;top: 7px;" shape="round"
                              v-show="store.state.wifiSignal>50&&store.state.wifiSignal<=75">
                        <img class="wifiImg" src="../assets/image/wifi/hasPass/70-89.png" alt="">{{
                        store.state.wifiName
                        }}
                        <a-button class="stopLoadWifi" @click="disConnectWifi">断开连接</a-button>
                    </a-button>
                    <a-button class="settingBtn" style="background-color: deepskyblue;position: relative;top: 7px;" shape="round"
                              v-show="store.state.wifiSignal>75&&store.state.wifiSignal<=100" prevent>
                        <img class="wifiImg" src="../assets/image/wifi/hasPass/90-100.png"
                             alt="">{{ store.state.wifiName }}
                        <a-button class="stopLoadWifi" @click="disConnectWifi">断开连接</a-button>
                    </a-button>
                </div>
                <span style="font-size: 18px">可用的网络</span>
                <p></p>
                <a-button class="settingBtn" style="color: black" v-for="(item,index) in wifiList" :key="index"
                          shape="round"
                          @click="openWifiPasswordInput(item[0])" v-show="store.state.wifiName!==item[0]">
                    <img class="wifiImg" :src="item[2]" alt="" :key="index">
                    {{ item[0] }}
                </a-button>
            </div>
            <div class="backDiv" @click="onClose">
                <BackButton></BackButton>
            </div>
        </a-drawer>

        <wifi-password-modal ref="wifiPass"></wifi-password-modal>
    </div>
</template>

<script>


import axios from "axios";
import {message,} from "ant-design-vue";
import API_BASE_URL from "../../config.js";
import {WifiOutlined, ReloadOutlined, LoadingOutlined} from "@ant-design/icons-vue";
import {getAction} from "@/manage";
import WifiPasswordModal from "@/components/wifiPasswordModal.vue";
import store from "../store";
import {sortObjectByValue} from "../../utils";
import BackButton from "@/components/BackButton.vue";


export default {
    name: "wifiList",
    computed: {
        store() {
            return store
        }
    },
    props: ['getWifiSignal', 'getWifiInfo'],
    components: {
        BackButton,
        WifiPasswordModal,
        // WifiOutlined,
        ReloadOutlined,
        LoadingOutlined
    },
    data() {
        return {
            open: false,
            //
            wifiHasPassPngs: {
                '0': require('@/assets/image/wifi/hasPass/1-19.png'),
                '25': require('@/assets/image/wifi/hasPass/20-39.png'),
                '50': require('@/assets/image/wifi/hasPass/40-69.png'),
                '75': require('@/assets/image/wifi/hasPass/70-89.png'),
                '100': require('@/assets/image/wifi/hasPass/90-100.png'),
            },
            wifiNoPassPngs: {
                '0': require('@/assets/image/wifi/noPass/1-19.png'),
                '25': require('@/assets/image/wifi/noPass/20-39.png'),
                '50': require('@/assets/image/wifi/noPass/40-69.png'),
                '75': require('@/assets/image/wifi/noPass/70-89.png'),
                '100': require('@/assets/image/wifi/noPass/90-100.png'),
            },
            //wifi列表
            wifiList: [],
            columns: [
                {
                    key: 'wifiName',
                    title: 'wifi名称'
                },
                {
                    key: 'signalStrength',
                    title: '信号强度'
                },
            ],
            dataSource: [],

            //当前wifi的信号图片
            currentWifi: null,
            openWifi: false,
            checked: true,
            wifiPassword: '',
            wifiName: '',
            nameOrPass: false,//true是密码,false是名称
            wifiSignal: "",
            loading: false,
            url: {
                wifiList: `${API_BASE_URL}/get-wifi-list`,
                disconnectWifi: `${API_BASE_URL}/disconnect-wifi`
            }

        }
    },
    created() {
        if (store.state.sendRequest) {
            this.loadWifiList()
        }
    },
    methods: {
        disConnectWifi() {
            store.commit('setWifiName', {value: ''})
            message.success("断开连接成功")
            this.isConnect = false
            getAction(this.url.disconnectWifi).then((res) => {
            })
        },
        onClose() {
            this.open = false
            if (this.checked === false) {
                // this.wifiList = []
            }
        },
        testSwitch() {
            if (this.checked === true) {
                this.loadWifiList()
            } else {
                this.wifiList = []
            }
        },
        //加载wifi列表
        loadWifiList() {
            this.wifiList = []
            this.loading = true

            getAction(this.url.wifiList).then((res) => {
                let wifiList = res.data.data
                console.log('wifiData', res.data.data)
                let currentWifiName = null;
                //降序排序
                let tt = sortObjectByValue(wifiList)

                for (let i = 0; i < tt.length; i++) {
                    let a = tt[i][1]
                    if (a >= 0 && a < 25) {
                        tt[i].push(this.wifiNoPassPngs['0'])
                    } else if (a >= 25 && a < 50) {
                        tt[i].push(this.wifiNoPassPngs['25'])
                    } else if (a >= 50 && a < 75) {
                        tt[i].push(this.wifiNoPassPngs['50'])
                    } else if (a >= 75 && a < 100) {
                        tt[i].push(this.wifiNoPassPngs['75'])
                    } else if (a === 100) {
                        tt[i].push(this.wifiNoPassPngs['100'])
                    }
                }

                let a = store.state.wifiSignal
                if (a >= 0 && a < 25) {
                    this.currentWifi = this.wifiHasPassPngs['0']
                } else if (a >= 25 && a < 50) {
                    this.currentWifi = this.wifiHasPassPngs['25']
                } else if (a >= 50 && a < 75) {
                    this.currentWifi = this.wifiHasPassPngs['50']
                } else if (a >= 75 && a < 100) {
                    this.currentWifi = this.wifiHasPassPngs['75']
                } else if (a === 100) {
                    this.currentWifi = this.wifiHasPassPngs['100']
                }


                setTimeout(() => {
                    this.loading = false
                    this.wifiList = tt
                }, 1000)

            }).catch(err => {
                console.log('获取wifi列表',err)
            })
        },
        openWifiPasswordInput(val) {
            this.$refs.wifiPass.open = true
            this.$refs.wifiPass.wifiName = val
        }
    }
}
</script>

<style scoped>
.header {
    margin-bottom: 13px;
}

.connectedArea {
    position: relative;
    margin-bottom: 30px;
}

.connectedArea span {
    font-size: 18px;
    display: flex;
    align-items: center
}

.switch {
    position: relative;
    width: 50px;
    left: 190px;
    height: 22px;
}

.reloadBtn{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 22px;
    width: 50px;
    left: 184px;
}


.wifiImg {
    width: 26px;
    margin-right: 10px;
    margin-bottom: 2px;
}


.backDiv {
    position: relative;
    display: flex;
    justify-content: center;
    top: 15px;
    margin-bottom: 20px;
}

.settingBtn {
    position: relative;
    /*font-weight: 1000;*/
    font-size: 18px;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    text-align: left;
    /*background-color: #ecedea;*/
    color: white;
    display: flex;
    align-items: center;
}

.stopLoadWifi {
    position: absolute;
    right: 4px;
    border-radius: 20px;
}
</style>